<template>
  <div class="header-menu">
    <span class="icon" @click="changeMenuState">
      <i 
        class="iconfont" 
        :class="isMenuActive ? 'iconrt-menu-active' : 'iconrt-menu'">
      </i>
    </span>
    <div class="extra" v-show="isMenuActive">
      <me-operate></me-operate>
      <div class="navbar">
        <navbar-phone></navbar-phone>
      </div>
    </div>
  </div>
</template>

<script>
import MeOperate from '@/pages/bc-me/components/me-operate'
import NavbarPhone from '@/pages/home/components/navbar-phone/navbar-phone'

export default {
  components: {
    MeOperate,
    NavbarPhone
  },
  props: {

  },
  data() {
    return {
      isMenuActive: false
    }
  },
  methods: {
    changeMenuState() {
      this.isMenuActive = !this.isMenuActive
    },
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @import '~@/assets/styles/mixins.styl'
  .header-menu
    .icon 
      extend-click()
      .iconfont 
        font-size 20px
    .extra 
      position absolute 
      top 48px
      left 0
      right 0 
      width 100%
      z-index 1000
      .navbar
        width 100%
        height 72px 
        background $color-theme-dark
        box-sizing border-box 
        padding 0 10px
</style>